.aqi-plus{
	.aqi-vertical{
		display: flex;

		.aqi-li{
			&:hover{
				background:rgba(0,0,0,0.2);
			}	
		}
	}
	.aqi-li{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding:0 10px;
		&>p{
			width: 100%;
		}
		.aqi-rate{
			
			position: relative;
			border-radius:4px;
			overflow: hidden;
		}

		.rate-item{
			position:absolute;
			height: 100%;
			left: 0;
			top:0;
			width: 0;
			transition: width 0.6s linear 0.3s;
			border-radius:4px;
		}
		.type-util{
			color:rgba(255,255,255,0.7);
		}

		.v-p-rate{
			height: 70%;
			width: 10px;
			position: relative;
			margin-top: 12px;
			margin-bottom: 4px;
			border-radius:4px;
		}
		.v-rate{
			position:absolute;
			width: 100%;
			height: 0;
			bottom: 0;
			left: 0;
			transition: height 0.6s linear 0.3s;
			border-radius:4px;
		}
		.v-type-util{
			font-size: 12px;
			opacity: 0.7;
		}
	}

	li.hover{
		background:rgba(0,0,0,0.4);
	}

	.legend-box{
		min-width: 200px;
		height: 100%;
		padding: 16px;
		dl{
			border: 1px solid rgba(0,142,255,0.4);
			padding:10px 20px;
			border-radius:6px;
		}
		dd{
			line-height: 28px;
			display: flex;
			align-items:center;
			padding: 0 10px;
			i{
				width: 10px;
				height: 10px;
				border-radius:50%;
				margin-right: 10px;
			}
			.name{
				width: 70px;
			}

			&:hover{
				background:rgba(83,118,216,0.2);
			}
		}
	}
}